<!-- subpkg_consult/department/index.vue -->
<script setup>
  import { depAllApi } from '@/services/consult.js'
  import { computed, ref } from 'vue'

  defineProps({
    type: String,
    illnessType: String,
  })

  const list = ref([])

  const activeIndex = ref(0)

  ;(async () => {
    const res = await depAllApi()
    list.value = res.data
  })()

  // 子部门列表
  // ?. 是可选链操作符语法
  const depChildren = computed(() => list.value[activeIndex.value]?.child)
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(v, i) of list"
        :key="v.id"
        class="department-item"
        :class="{ active: i === activeIndex }"
        @click="activeIndex = i"
        >{{ v.name }}</view
      >
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        v-for="v of depChildren"
        :key="v.id"
        hover-class="none"
        :url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${v.id}`"
        class="department-item"
      >
        {{ v.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  // subpkg_consult/department/index.vue
  .department-page {
    display: flex;
    height: 100vh;
    /* #ifdef H5 */
    height: calc(100vh - 45px);
    /* #endif */
    border-top: 1rpx solid #eee;
  }

  .department-primary {
    width: 220rpx;
    padding: 20rpx 0;
    background-color: #f6f6f6;

    .department-item {
      line-height: 1.5;
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      color: #6f6f6f;

      &.active {
        color: #16c2a3;
        background-color: #fff;
      }
    }
  }

  .department-secondary {
    flex: 1;
    padding: 20rpx 0;

    .department-item {
      line-height: 1.5;
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      color: #3c3e42;
    }
  }
</style>
